<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../../cr_elements/cr_button/cr_button.html">
<link rel="import" href="../../../cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="../../../cr_elements/icons.html">
<link rel="import" href="../../../cr_elements/shared_style_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="mojo_interface_provider.html">
<link rel="import" href="network_password_input.html">
<link rel="import" href="network_shared_css.html">
<link rel="import" href="onc_mojo.html">

<dom-module id="sim-lock-dialogs">
  <template>
    <style>
      #enter-pin-description {
        margin-bottom: 16px;
      }

      .pinEntrySubtext {
        font-size: var(--cr-form-field-label-font-size);
        font-weight: 400;
        margin-top: -10px;
      }

      :host([has-error-text_]) .pinEntrySubtext {
        color: var(--cros-text-color-alert);
      }

      #changePinOld {
        margin-top: 24px;
      }

      #unlockPin {
        margin-top: 24px;
      }

      #puk-warning-container {
        display: flex;
        margin-bottom: 24px;
        margin-top: 20px;
      }

      #puk-warning-icon {
        --iron-icon-fill-color: var(--cros-icon-color-alert);
        --iron-icon-height: 24px;
        --iron-icon-width: 24px;
        margin-inline-end: 4px;
      }

      :host([has-error-text_]) #puk-warning-container {
        color: var(--cros-text-color-alert);
      }
    </style>
    <!-- Enter PIN dialog -->
    <cr-dialog id="enterPinDialog"
        on-cancel="onCancel_"
        close-text="[[i18n('close')]]">
      <div slot="title">[[i18n('networkSimEnterPinTitle')]]</div>
      <div slot="body">
        <div id="enter-pin-description" aria-hidden="true">
          [[i18n('networkSimEnterPinDescription')]]
        </div>
        <network-password-input id="enterPin"
            value="{{pin_}}"
            on-enter="sendEnterPin_"
            disabled="[[inProgress_]]"
            invalid="[[hasErrorText_]]"
            aria-labeledby="pinEntrySubtext">
        </network-password-input>
        <div class="pinEntrySubtext" aria-live="assertive">
          [[getPinEntrySubtext_(error_, deviceState)]]
        </div>
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCancel_">
          [[i18n('cancel')]]
        </cr-button>
        <cr-button class="action-button"
            aria-describedby="enter-pin-description"
            on-click="sendEnterPin_"
            disabled="[[!enterPinEnabled_]]">
          [[i18n('networkSimEnter')]]
        </cr-button>
      </div>
    </cr-dialog>

    <!-- Change PIN dialog -->
    <cr-dialog id="changePinDialog"
        on-cancel="onCancel_"
        close-text="[[i18n('close')]]">
      <div slot="title">[[i18n('networkSimChangePinTitle')]]</div>
      <div slot="body">
        <network-password-input id="changePinOld"
            value="{{pin_}}"
            label="[[i18n('networkSimEnterOldPin')]]"
            disabled="[[inProgress_]]"
            invalid="[[isOldPinInvalid_(error_, deviceState)]]"
            error-message="[[getOldPinErrorMessage_(error_, deviceState)]]"
            allow-error-message>
        </network-password-input>
        <network-password-input id="changePinNew1"
            value="{{pin_new1_}}"
            label="[[i18n('networkSimEnterNewPin')]]"
            disabled="[[inProgress_]]"
            allow-error-message>
        </network-password-input>
        <network-password-input id="changePinNew2"
            value="{{pin_new2_}}"
            label="[[i18n('networkSimReEnterNewPin')]]"
            on-enter="sendChangePin_"
            disabled="[[inProgress_]]"
            invalid="[[isSecondNewPinInvalid_(error_, deviceState)]]"
            error-message="[[getSecondNewPinErrorMessage_(error_, deviceState)]]"
            allow-error-message>
        </network-password-input>
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCancel_">
          [[i18n('cancel')]]
        </cr-button>
        <cr-button class="action-button"
            on-click="sendChangePin_"
            disabled="[[!changePinEnabled_]]">
          [[i18n('networkSimChange')]]
        </cr-button>
      </div>
    </cr-dialog>

    <!-- Unlock PIN dialog -->
    <cr-dialog id="unlockPinDialog"
        on-cancel="onCancel_"
        close-text="[[i18n('close')]]">
      <div slot="title">[[i18n('networkSimLockedTitle')]]</div>
      <div slot="body">
        <network-password-input id="unlockPin"
            value="{{pin_}}"
            on-enter="sendUnlockPin_"
            disabled="[[inProgress_]]">
        </network-password-input>
        <div class="pinEntrySubtext" aria-live="assertive">
          [[getPinEntrySubtext_(error_, deviceState)]]
        </div>
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCancel_">
          [[i18n('cancel')]]
        </cr-button>
        <cr-button class="action-button"
            on-click="sendUnlockPin_"
            disabled="[[!enterPinEnabled_]]">
          [[i18n('networkSimUnlock')]]
        </cr-button>
      </div>
    </cr-dialog>

    <!-- Unlock PUK dialog -->
    <cr-dialog id="unlockPukDialog"
        on-cancel="onCancel_"
        close-text="[[i18n('close')]]">
      <div slot="title">[[i18n('networkSimLockedTitle')]]</div>
      <div slot="body">
        <div id="puk-subtitle">
          [[i18n('networkSimPukDialogSubtitle')]]
        </div>
        <div id="puk-warning-container">
          <template is="dom-if" if="[[hasErrorText_]]">
            <iron-icon id="puk-warning-icon" icon="cellular-setup:warning">
            </iron-icon>
          </template>
          <div aria-live="assertive">
            [[getPukWarningMessage_(error_, deviceState)]]
          </div>
        </div>
        <network-password-input id="unlockPuk"
            value="{{puk_}}"
            label="[[i18n('networkSimEnterPuk')]]"
            disabled="[[inProgress_]]"
            invalid="[[isPukInvalid_(error_, deviceState)]]"
            error-message="[[getPukErrorMessage_(error_, deviceState)]]"
            allow-error-message>
        </network-password-input>
        <network-password-input id="unlockPin1"
            value="{{pin_new1_}}"
            label="[[i18n('networkSimEnterNewPin')]]"
            disabled="[[inProgress_]]"
            allow-error-message>
        </network-password-input>
        <network-password-input id="unlockPin2"
            value="{{pin_new2_}}"
            label="[[i18n('networkSimReEnterNewPin')]]"
            on-enter="sendUnlockPuk_"
            disabled="[[inProgress_]]"
            invalid="[[isSecondNewPinInvalid_(error_, deviceState)]]"
            error-message="[[getSecondNewPinErrorMessage_(error_, deviceState)]]"
            allow-error-message>
        </network-password-input>
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCancel_">
          [[i18n('cancel')]]
        </cr-button>
        <cr-button class="action-button"
            on-click="sendUnlockPuk_"
            disabled="[[!enterPukEnabled_]]"
            aria-describedby="puk-subtitle">
          [[i18n('networkSimUnlock')]]
        </cr-button>
      </div>
    </cr-dialog>
  </template>
  <script src="sim_lock_dialogs.js"></script>
</dom-module>